<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="title" :border-bottom="false"></fa-navbar>
		<view class="u-p-30 bg-white">
			<u-form :model="form" ref="uForm" label-width="180">

				<u-form-item label="日期" prop="odtime" required  >				  
				<!-- <uni-datetime-picker type="date" :clear-icon="false" :border="false" v-model="form.odtime" @maskClick="maskClick" /> -->

					<picker mode="date" :value="form.odtime"  @change="selodtime">
			  	     <view class="uni-input">{{form.odtime}}</view>
			  	    </picker>	
				</u-form-item>
				<!-- 支付参考 pjpay order -->

				<u-form-item label="姓名" prop="name" required>
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" required>
					<u-input v-model="form.mobile" />
				</u-form-item>


				<!-- 	<u-form-item label="电池伏数" prop="batteryCapacity" required>
					<u-input disabled @click="showsel=true;" v-model="form.batteryCapacity" />			 
				</u-form-item> -->


				<!-- <u-form-item label="电池日期" prop="batteryCapacitytime"   >					
				    <picker mode="date" :value="form.batteryCapacitytime"  @change="selbatteryCapacitytime">
				 	    <view class="uni-input">{{form.batteryCapacitytime}}</view>
				 	 </picker>									
				</u-form-item> -->

				<view class="item">
					<u-form-item label="产品类型" prop="type" label-width="150" :border-bottom="false">
						<u-input type="select" input-align="right" :select-open="typeShow" v-model="form.typename"
							placeholder="请选择商品类型" @click="typeShow = true"></u-input>
					</u-form-item>
				</view>
				<view class="item">
					<u-form-item label="产品项目" prop="project" label-width="150" :border-bottom="false">
						<u-input type="select" input-align="right" :select-open="projectShow" v-model="form.projectname"
							placeholder="请选择商品项目" @click="projectShow = true"></u-input>
					</u-form-item>
				</view>


			<!-- 	<u-form-item label="购买品牌" prop="form.brandname" required>
					<u-input type="select" :select-open="goodsShow" v-model="form.brandname" placeholder="请选择"
						@click="brandShow = true"></u-input>
				</u-form-item> -->

				<u-form-item label="产品价格" prop="price">
					<u-input v-model="form.pricegoods" />
				</u-form-item>
				
				<view class="u-m-t-30 u-m-b-30 u-skeleton-rect"   >
					
					<u-cell-group>
						<u-cell-item :arrow="false" title="图片"  ></u-cell-item>
					
					</u-cell-group>
					
					<view class="top u-border-bottom">
						<view class="left u-tips-color">
							<!-- <text>订单编号:</text> -->
							<!-- <text>订单编号:</text> -->
							
							<view class="left"><image style="width:200px;height:150px" :src="form.image" mode="aspectFill" @click="previewImg()"></image></view>
							<!-- <view class="store">卡密：{{ item.verifiycode }}-状态：{{ item.statustext }}</view> -->
							<!-- <view class="store">{{ item.verifiycode }}</view>-->
						</view>
						<!-- <view class="right">{{ item.verifiycode }}</view> -->
					</view>
					
				
					
					
				</view>
							
				
				
				<u-form-item label="数量" prop="price"> 					
					<u-number-box v-model="form.num" :min="1"></u-number-box>
					<!-- :index="index" -->
					<!-- @blur="setCartNum"
					@minus="setCartNum"
					@plus="setCartNum" -->
					
					
				</u-form-item>
				 


				<!-- <view class="u-p-30 u-m-t-30 bg-white" >
					<view class="text-weight u-p-b-30">上传图片</view>
					<u-upload
						width="150"
						height="150"
						ref="uUpload"
						@on-uploaded="onUploaded"
						@on-remove="onRemove"
						:action="uploadurl"
						:header="header"
						:form-data="formdata"
						max-count="5"
					 ></u-upload>
				</view>	 -->

				<!-- <u-form-item label="所在地区" prop="area_name">
					<u-input type="select" :select-open="cityShow" v-model="form.area_name" placeholder="请选择地区"
						@click="cityShow = true"></u-input>
				</u-form-item>
				<u-form-item label="详细地址" prop="address" required>
					<u-input type="textarea" v-model="form.address" />

				</u-form-item> -->

	<!-- 	<u-form-item label="报修内容" prop="mark">
			<u-input type="textarea" v-model="form.mark" placeholder="请输入" />
		</u-form-item> -->


<!-- <view class="item"> -->
		 <!-- <u-form-item label="是否线上下单" prop="isxsxd" label-width="160" :border-bottom="false">
		    <u-input  type="select" input-align="right" :select-open="isxsxdShow" v-model="form.isxsxd" placeholder="请选择" @click="isxsxdShow = true"></u-input>
		  </u-form-item> -->
		<!-- </view> -->
		
		

				<!-- 	
				<u-form-item label="选择" prop="address">
					<u-input type="textarea" v-model="form.address" />
					<u-button slot="right" type="primary" :custom-style="{ backgroundColor: '#007eff', color: theme.color }" size="mini" @click="chooseAddress">
						选择地址
					</u-button>
				</u-form-item> -->
				<!-- <u-form-item label="设为默认地址" :border-bottom="false">
					<u-switch slot="right" :active-color="theme.bgColor" v-model="isdefault" @change="change"></u-switch>
				</u-form-item> -->
			</u-form>
		</view>
		<!-- <u-calendar v-model="odtimeshow" :mode="range" max-date="2099-12-30" @change="odtimechange"></u-calendar> -->
		<!-- 城市 -->
		<view class="" v-if="is_render"><fa-citys v-model="cityShow" :areaCode="areaCode"
				@city-change="cityResult"></fa-citys></view>
<!-- 
		<view class="" v-if="is_render"><fa-goodssel v-model="goodsShow" :areaCode="areaCode"
				@city-change="goodsResult"></fa-goodssel></view> -->

		<u-select v-model="showsel" mode="single-column" :list="columns" @confirm="confirm"></u-select>
		<view class="u-flex u-col-center u-row-center u-border-top" style="z-index:999">
			<u-button type="primary" :custom-style="{ width: '80vw', backgroundColor: '#007eff', color: theme.color }"
				shape="circle" hover-class="none" @click="submit">
				提交
			</u-button>
		</view>



		<u-select v-model="isxsxdShow" :list="isornoList" @confirm="isxsxdConfirm"></u-select>

		<u-select v-model="typeShow" :list="typeList" @confirm="typeConfirm"></u-select>

		<u-select v-model="projectShow" :list="projectList" @confirm="projectConfirm"></u-select>
	</view>
</template>

<script>
   import { loginfunc } from '@/common/fa.mixin.js';
	export default {
    mixins: [loginfunc],
	computed: {
			_paytype_() {
				// #ifdef H5
				if (!this._first) {
					this.paytype = this.vuex_config.defaultpaytype;
					if (this.paytype) {
						this._first = true;
					}
				}
				// #endif
				return this.paytype;
			}
		},
		
		data() {
			
			return {
				title: '一键报修',
			 
				form: {
					project:'',
					pricegoods:0,
					odtime: '请选择',
					brandname: '',
					num: 1,
					mobile: '',
					address: '',
					isdefault: 1,
					area_name: '',
					area_id: '',
					images: '',
					pricereal: 0,
					isxsxd:'是',
					image:''
				
					// batteryCapacity: '',
					// batteryCapacitytime: this.getDate(new Date())
				},
				imageslen: 0,
				rules: {
				

				},
				
				isxsxdShow: false,
				timeSHow: false,
				projectShow: false,
				isdefault: false,
				cityShow: false,
				goodsShow: false,
				is_render: false,
				areaCode: [],
				odtimeshow: 0,
				mode: 'date', // date
				dateString1: this.getDate(new Date()),
				dateString: this.getDateTime(new Date()),
				datetimeString: this.getDateTime(new Date(), false),
				datetimeDefaultValueString: '',
				datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
				dateTimestamp: Date.now(),
				dateInstance: new Date(),
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 *
					3600000)],
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000,
				showsel: false,
				columns: [{
					value: '48V',
					label: '48V'
				}, {
					value: '60V',
					label: '60V'
				}, {
					value: '72V',
					label: '72V'
				}],
				typeShow: false,
				typeList: [{
						value: '1',
						label: '类型1'
					},
					{
						value: '2',
						label: '类型2'
					}
				],
				isornoList: [{
						value: '否',
						label: '否'
					},
					{
						value: '是',
						label: '是'
					}
				],
				projectList: [{
						value: '1',
						label: '项目1'
					},
					{
						value: '2',
						label: '项目2'
					}
				],
				paytype:'',
				odordersn:'',

			};
		},
		onShow() {
			this.goodscatelist();
			// this.goodslist();
		},
		onLoad(e) {
			this.id = e.id || '';
			this.odordersn = e.ordersn || '';
			console.log(22222, this.odordersn)
			if (e.id) {
				this.title = '编辑';
				this.getAddressInfo();
			} else {
				this.title = '添加';
				this.is_render = true;
				this.isdefault = this.vuex_address.id ? false : true;
			}
			
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			userInfo() {
				// this.form.id = this.vuex_user.id;
				// this.form.name = this.vuex_user.realname;
				// this.form.mobile = this.vuex_user.mobilehand;
				// this.form.sex = this.vuex_user.sex; 
				// this.form.birthday = this.vuex_user.birthday;
				// this.form.area_name = this.vuex_user.area_name;
				// this.form.address = this.vuex_user.address;
				return this.vuex_user;
			},
			header() {
				return {
					token: this.vuex_token || '',
					uid: this.vuex_user.id || 0
				};
			},
			formdata() {
				let multipart = (this.vuex_config.config && this.vuex_config.config.upload.multipart) || '';
				let isObj = this.$u.test.object(multipart);
				if (isObj) {
					return this.vuex_config.config.upload.multipart;
				}
				return {};
			},
			uploadurl() {
				if (!this.vuex_config.upload) {
					return '';
				}
				return this.vuex_config.upload.uploadurl;
			}
		},


		methods: {
			goodscatelist() {
 
                // 用户线下购买 这个应该只针对电动车
                let para={flag:'odgoodsaddbyuserxx'}
				this.$api.formgoodscate(para).then(res => {
					// this.$u.toast(res.msg);
					if (res.code) {
                     // console.log("sdfdsf",res.data)
						this.typeList = res.data;
					}
				});


			},
			goodslist() {
				console.log(3333333)
				this.$api.formgoods(this.form).then(res => {
					// this.$u.toast(res.msg);
					if (res.code) {
						this.projectList = res.data;
					}
				});


			},
			// 时间选择1 
			odtimeshowfun() {
				this.odtimeshow = 1;

			},
			odtimechange(e) {
				// this.odtimeshow=1;
				this.form.odtime = e.result;
				console.log(e);
			},
			getgoodsbysel() {
				this.$api.goodsbyselect({
					id: this.id
				}).then(res => {
					if (res.code) {
						this.form = Object.assign(this.form, {
							id: this.id,
							receiver: res.data.receiver,
							mobile: res.data.mobile,
							address: res.data.address
						});
						this.isdefault = res.data.isdefault == 1;
						this.areaCode = [res.data.province_id, res.data.city_id, res.data.area_id];
						this.is_render = true;
					} else {
						this.$u.toast(res.msg);
						uni.$u.route({
							type: 'back'
						});
					}
				});
			},
			change(value) {
				this.form.isdefault = value ? 1 : 0;
			},
			chooseAddress() {
				console.log(111)
				uni.chooseLocation({
					success: res => {
						Object.assign(this.form, {
							address: res.address
						});
					}
				});
			},
			//城市选择 三级结果
			cityResult(e) {
				this.form.area_name = e.province.label + '/' + e.city.label + '/' + e.area.label;
				this.form.area_id = e.area.value;
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.area = e.area.label
				// this.form.brandname = e.province.label + '/' + e.city.label ;
				// this.form.area_id = e.area.value;
			},

			//城市选择 三级结果
			goodsResult(e) {
				// this.form.area_name = e.province.label + '/' + e.city.label + '/' + e.area.label;
				// this.form.area_id = e.area.value;
				this.form.brandname = e.province.label + '/' + e.city.label;
				// this.form.area_id = e.area.value;
			},
			
			// 先发起支付
			submit: async function() {
				this.form.mordersn=this.odordersn;
				if(this.form.project==""){
					this.$u.toast('请选择产品！');return false;
				}
				
				if(this.form.pricegoods==""){
					this.$u.toast('缺少价格！');return false;
				}
				
				if(this.form.num==""){
					this.$u.toast('缺少数量！');return false;
				}
				
				let realpay=this.form.pricegoods*this.form.num*1;
				this.form.pricereal=realpay;
			    // 不走支付
				if(this.form.isxsxd=='是999'){
					
					let res = await this.$api.payment_com({
						price:realpay,
						openid: this.vuex_openid || "", 
						logincode: await this.getMpCode(),
						method: 'miniapp'
					});
					if (!res.code) {
						this.$u.toast(res.msg);
						return;
					}
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: rest => {
							console.log(rest)
							this.$u.toast('支付成功！');
						if (rest.errMsg == 'requestPayment:ok') {													 
							 
							 	let onlychangekcj = this.form.onlychangekcj;
							 	let pricegoods = this.form.pricegoods;
							 	let pricechange = this.form.pricechange;
							if ((pricegoods && onlychangekcj)) {
												// this.$u.toast("只换空车架与新车价格不可同时填写");
												// return false;
							 }
							    this.form.order_sn=res.data.order_sn;
			 
							 	this.$refs.uForm.validate(valid => {
							 					if (valid) {
							 						this.$api.uformbxpjbuy(this.form).then(res => {
							 							this.$u.toast(res.msg);
							 							if (res.code) {
							 								setTimeout(() => {
							 									uni.$u.route({
							 										type: 'back'
							 									})
							 								}, 1500);
							 							}
							 						});
							 					} else {
							 						console.log('验证失败');
							 					}
							 				});
							 
							 
							
						}
						
						},
						fail: err => {
							this.$u.toast('fail:' + JSON.stringify(err));
						}
					});
								
				}else{
					// 直接提交单据
					let onlychangekcj = this.form.onlychangekcj;
					 	let pricegoods = this.form.pricegoods;
					 	let pricechange = this.form.pricechange;
					if ((pricegoods && onlychangekcj)) {
										// this.$u.toast("只换空车架与新车价格不可同时填写");
										// return false;
					 }
					 // this.form.order_sn=res.data.order_sn;
					    // this.form.pricegoods=this.form.pricegoods*this.form.num*1;
					 	this.$refs.uForm.validate(valid => {
					 					if (valid) {
					 						this.$api.submitgoodsaddbyuserxx(this.form).then(res => {
					 							this.$u.toast(res.msg);
					 							if (res.code) {
					 								setTimeout(() => {
					 									uni.$u.route({
					 										type: 'back'
					 									})
					 								}, 1500);
					 							}
					 						});
					 					} else {
					 						console.log('验证失败');
					 					}
					 				});
				}
				
				
			
			
			
			},
			
			
			
			sumbit8888() {
				let onlychangekcj = this.form.onlychangekcj;
				let pricegoods = this.form.pricegoods;
				let pricechange = this.form.pricechange;

				if ((pricegoods && onlychangekcj)) {
					// this.$u.toast("只换空车架与新车价格不可同时填写");
					// return false;
				}

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$api.uformbxAdd(this.form).then(res => {
							this.$u.toast(res.msg);
							if (res.code) {
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1500);
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			
			
			dealprice(e) {
				// 配件价格
				let pricepj = this.form.pricepj;
				// 只换空车价
				let onlychangekcj = this.form.onlychangekcj;
				// 新车价格
				let pricegoods = this.form.pricegoods;
				// 以旧换新
				let pricechange = this.form.pricechange;
				// console.log(pricegoods,"change",pricechange);			
				// if((pricegoods&&onlychangekcj)){
				// 	this.$u.toast("只换空车架与新车价格不可同时填写");
				// 	return false;
				// }


				if (pricechange) {
					let dealprice1 = 0;
					let title = "以旧换新价格不能大于新车价";
					if (pricepj) {
						dealprice1 = pricepj;
						this.form.pricereal = pricepj - pricechange;
						title = "以旧换新价格不能大于配件价格";
					} else if (onlychangekcj) {
						dealprice1 = onlychangekcj;
						this.form.pricereal = dealprice1 - pricechange;
						title = "以旧换新价格不能大于只换空车架价格";
					} else if (pricegoods) {
						dealprice1 = pricegoods;
						this.form.pricereal = dealprice1 - pricechange;
						title = "以旧换新价格不能大于新车价格";
					}

					if (dealprice1 * 1 < pricechange * 1) {
						this.$u.toast(title);
					} else {
						// this.form.pricereal=pricegoods-pricechange;
					}

				} else {
					// this.$u.toast("请输入正确金额");
				}

				console.log(e);
			},
			onUploaded(e, name) {
				console.log(e, name);
				console.log("len", e.length);
				if (e.length > 5) {
					this.$u.toast("最多可以上传5张");
					// 当文件数量达到限制时，阻止继续添加文件
					e.stopPropagation();
					return false;
				}
				let images1 = ""
				images1 = e
					.map(item => {
						return item.response.data.url;
					})
					.join(',');
				this.form.images = images1;
				// let j = JSON.parse(r2.data);
				this.imageslen = e.length;
			},
			onRemove(index, lists, name) {
				this.images = lists
					.map(item => {
						return item.response.data.url;
					})
					.join(',');
			},
			confirm(e) {
				console.log(e[0].value)
				this.form.batteryCapacity = e[0].value;

			},
			change(e) {
				console.log('----change事件:', e);
			},


			selodtime(e) {
				this.form.odtime = e.detail.value

			},
			selbatteryCapacitytime(e) {
				this.form.batteryCapacitytime = e.detail.value
				console.log('----maskClick事件');
			},

			maskClick(e) {


				this.form.batteryCapacitytime = e.detail.value
				console.log('----maskClick事件');
			},
			getDateTime(date, addZero = true) {
				return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
			},
			getDate(date, addZero = true) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			},
			getTime(date, addZero = true) {
				date = new Date(date)
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				return this.hideSecond ?
					`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
					`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			typeConfirm(e) {
				this.form.typename = e[0]['label'];
				this.form.type = e[0]['value'];
	

                let para={cate:e[0]['value']}
				this.$api.formgoods(para).then(res => {
					// this.$u.toast(res.msg);
					if (res.code) {
						this.projectList = res.data;
					}
				});


				console.log(e)
			},
		projectConfirm(e) {
			this.form.projectname = e[0]['label'];
			this.form.project = e[0]['value'];
		
		    // this.form.price = e[0]['price'];
			  var ids="0";
			  var price=0;
			   var image="";
			  this.projectList.forEach(function(e1){
			            // ids+=","+e.id;
						if(e1.value==e[0]['value']){
							price = e1.price;
							image = e1.image;
						}
			
			   });
			   this.form.pricegoods=price;
			   	this.form.image = image;
			   console.log("dsf",image);
			
			console.log(e)
		},
			  isxsxdConfirm(e){
						  				// this.form.isneedkc=e[0]['label'];  
						  				this.form.isxsxd=e[0]['value'];  
						  			
						  },


		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}

	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>